<template>
    <div class="location">
        <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(image, index) in this.info.images" :key="index">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="content">
            <p class="title">{{info.name}}</p>
            <div class="content">
                {{info.introduce}}
            </div>
        </div>
        <van-cell-group>
            <van-cell title="位置" :value="info.place" />
            <van-cell title="占地大小" :value="info.size" />
            <van-cell title="价格" :value="info.price" />
            <van-cell title="联系电话" :value="info.phone" />
        </van-cell-group>
        <Tabbar />
    </div>
</template>

<script>
import api from "../api";
import Tabbar from "../component/tabbar";
export default {
    name: "location",
    components: {
        Tabbar,
    },
    data() {
        return {
            info: {},
        };
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        async getInfo() {
            const response = await api.realty.getRealtyPage({
                currentPage: 1,
                pageSize: 10,
            });
            this.info = response.data.data.records[0] || {};
            this.info.images = this.info.images.split(",");
        },
    },
};
</script>

<style lang='less' scoped>
.my-swipe {
    img {
        width: 100%;
        height: 14rem;
        object-fit: cover;
    }
}
.location {
    background: #f6f6f6;
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        .title {
            font-size: x-large;
            font-weight: 600;
        }
        .content {
            color: #333;
            padding: 1rem;
        }
    }
}
</style>